<template>
  <div class="page-container">
    <div class="header">
      <el-button class="before" type="text" icon="el-icon-arrow-left" @click="Js">购买加速包</el-button>
    </div>
    <div class="main-content">
      <div class="sign-in-wrapper">
        <el-card class="sign-in-card">
          <div slot="header" class="card-header">
            <span>每日签到</span>
          </div>
          <div v-if="!isSignedIn">
            <el-button type="primary" @click="handleSignIn">点击签到</el-button>
          </div>
          <div v-else>
            <p>今日已签到!</p>
          </div>
          <p v-if="signInMsg">{{ signInMsg }}</p>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
let url = 'http://localhost:9701/web/';
export default {
  data() {
    return {
      isSignedIn: false,
      signInMsg: '',
    };
  },
  methods: {
    handleSignIn() {
      this.axios.get(url + 'charge-record/sign').then(res => {
        if (res.data.data == false) {
          this.$message({
            message: '签到失败',
            type: 'error'
          });
          this.isSignedIn = true;
        }else{
          this.$message({
            message: '签到成功',
            type: 'success'
          });
          this.isSignedIn = true;
          this.signInMsg = '签到成功！';
        }
      })
    },
    Js() {
      setTimeout(() => {
        this.$router.push({path: '/accelerate'});
        this.isNavigating = false; // 导航完成后，重置标志位
      }, 500); // 延迟500毫秒跳转
    },
  },
};
</script>

<style scoped>
.page-container {
  width: 390px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f4f4f4;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.before {
  text-align: left;
}

.right {
  display: flex;
  align-items: center;
}

.right el-button {
  margin-left: 10px;
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sign-in-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sign-in-card {
  width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  padding: 15px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #e0e0e0;
}

.sign-in-card div {
  padding: 20px;
}

.sign-in-card p {
  margin: 0;
  color: #666;
}
</style>